<template>
  <div>
    <el-dialog
      top="10vh"
      width="500px"
      :title="dialogTitle"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
    >
      <template v-if="!isBatch">
        <SubmitForm
          :rule-form="ruleForm"
          :rules="rules"
          :form-list="formList"
          @change="handleFormChange"
          @save="onSave"
          @close="dialogValue = false"
        />
      </template>
      <template v-else>
        <el-upload
          class="upload-demo"
          drag
          action="/api/student/batchCreate"
          :headers="headers"
          :on-success="handleSuccess"
          :on-error="handleError"
          accept=".xlsx,.xls"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传 xlsx/xls 文件</div>
        </el-upload>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { http } from '@/api'
export default {
  name: 'FormAdd',
  data() {
    return {
      apiKey: 'student',
      dialogValue: false,
      isBatch: false,
      dialogTitle: '添加/编辑',
      ruleForm: {},
      defaultForm: {
        student_no: '',
        name: '',
        gender: 1,
        grade: '',
        class_name: '',
        parent_id: undefined,
        status: 1,
        id: undefined,
      },
      rules: {
        student_no: [{ required: true, message: '请输入学号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        grade: [{ required: true, message: '请输入年级', trigger: 'change' }],
        class_name: [{ required: true, message: '请输入班级', trigger: 'blur' }],
      },
      formList: [
        {
          label: '年级',
          prop: 'grade',
          name: 'select',
          clearable: true,
          colSpan: 12,
          options: [
            { label: '一年级', value: 1 },
            { label: '二年级', value: 2 },
            { label: '三年级', value: 3 },
            { label: '四年级', value: 4 },
            { label: '五年级', value: 5 },
            { label: '六年级', value: 6 }
          ]
        },
        {
          label: '班级',
          prop: 'class_name',
          name: 'input',
          clearable: true,
          colSpan: 12
        },
        {
          label: '学号',
          prop: 'student_no',
          name: 'input',
          clearable: true,
          colSpan: 12
        },
        {
          label: '姓名',
          prop: 'name',
          name: 'input',
          clearable: true,
          colSpan: 12
        },
        {
          label: '性别',
          prop: 'gender',
          name: 'select',
          clearable: true,
          colSpan: 12,
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 2 }
          ]
        },
        {
          label: '家长',
          prop: 'parent_id',
          name: 'select',
          clearable: true,
          colSpan: 12,
          options: []
        },
        {
          label: '状态',
          prop: 'status',
          name: 'select',
          clearable: true,
          colSpan: 12,
          options: [
            { label: '正常', value: 1 },
            { label: '禁用', value: 0 }
          ]
        }
      ],
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Authorization': localStorage.getItem('token')
      }
    }
  },
  methods: {
    handleFormChange({ key, val }) {
      this.ruleForm[key] = val
    },
    open(row) {
      this.isBatch = false
      this.dialogTitle = row ? '编辑' : '新增'
      this.dialogValue = true
      // 获取家长列表
      http.parent.list().then(res => {
        const parentOptions = res.data.map(item => ({
          label: item.name,
          value: item.id
        }))
        this.formList.find(item => item.prop === 'parent_id').options = parentOptions
      })
      if (row) {
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data
          }
        })
      } else {
        this.ruleForm = {
          ...this.defaultForm
        }
      }
    },
    openBatch() {
      this.isBatch = true
      this.dialogTitle = '批量导入'
      this.dialogValue = true
    },
    onSave() {
      http[this.apiKey][this.ruleForm.id ? 'update' : 'create'](this.ruleForm.id, { ...this.ruleForm }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      })
    },
    handleSuccess(response) {
      if (response.code === 0) {
        this.$message.success('导入成功')
        this.dialogValue = false
        this.$emit('get-page')
      } else {
        this.$message.error(response.msg || '导入失败')
      }
    },
    handleError() {
      this.$message.error('导入失败')
    }
  }
}
</script>

<style scoped lang="scss">
.upload-demo {
  text-align: center;
}
</style>
